<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dialog {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
        }

        .content {
            background-color: white;
            width: 600px;
            height: 400px;
            border: 1px solid #000;
        }
    </style>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        var id;
        window.onload = function () {
            id = getQuery("id");
            cutByItem(1);
        }

        function cutByItem(pageNo) {
            axios.get("/mainPost/cutByItem", {
                params: {
                    id: id,
                    pageNo: pageNo,
                    title: $("titleId").value,
                    author:$("authorId").value,
                    startDate: $("startDate").value,
                    endDate: $("endDate").value
                }
            }).then(resp => {
                var ip = resp.data;
                // console.log(ip);
                var str = "";
                ip.records.forEach(n => {
                    str += `<tr><td><a href="/replies.html?id=${n.id}">${n.title}</a></td>
                        <td>${n.author}</td><td>${n.count}</td><td>${n.date}</td></tr>`
                })
                $("data").innerHTML = str;

                var cutStr = "";
                for (var i = 1; i <= ip.pages; i++) {
                    cutStr += `<a style="margin-left: 10px" href="javascript:cutByItem(${i})">${i}</a>`
                }
                $("cutDiv").innerHTML = cutStr;
            })
        }

        function add() {
            $("dialog").style.visibility = "visible";
        }

        function publish() {
            axios.get("/mainPost/add", {
                params: {
                    title: $("titleText").value,
                    content: $("contentText").value,
                    channelId: id
                }
            }).then(resp => {
                var info = resp.data;
                if (info = "ok") {
                    $("dialog").style.visibility = "hidden";
                    cutByItem(1);
                }
            })
        }

        function returnPost() {
            $("dialog").style.visibility = "hidden";
        }
    </script>
</head>
<body>
主题名称：<input type="text" id="titleId">
作者：<input type="text" id="authorId">
起始日期：<input type="text" id="startDate">
结束日期：<input type="text" id="endDate">
<input type="button" value="搜索" onclick="cutByItem(1)">
<div>
    <table border="1px" width="80%">
        <thead>
        <tr>
            <td>主题</td>
            <td>作者</td>
            <td>回帖数量</td>
            <td>发布日期</td>
        </tr>
        </thead>
        <tbody id="data">

        </tbody>
    </table>
</div>

<div id="cutDiv"></div>
<div class="dialog" id="dialog">
    <div class="content">
        发表贴子
        <br>
        标题：<input type="text" id="titleText"><br>
        内容：<input type="text" id="contentText"><br>
        <input type="button" value="发表" onclick="publish()">
        <input type="button" value="返回" onclick="returnPost()">
    </div>
</div>


<input type="button" value="发布话题" onclick="add()">
</body>
</html>